<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <script src="/static/js/jquery-2.2.4.js"></script>
    <script src="/static/bootstrap-table/bootstrap-table.js"></script>
    <!--
    官方例子
    https://examples.bootstrap-table.com/#view-source
    -->
    <script>
        $(function(){

            $("#tbItemTable").bootstrapTable({
                url:"/findAll",
                pagination:true,//分页  默认是客户端分页
                search:true, //搜索框
                toolbar:"#toolbar",//工具条
                columns:[[
                    // [{"title":"小米手机"}]
                    //field: 服务端响应回来的json的key一致
                    //title:标题,sortable:true  排序

                    {checkbox:true},//复选框
                    {field:"id",title:"商品编号",sortable:true},
                    {field:"title",title:"商品名称"},
                    {field:"sellPoint",title:"卖点"},
                    {field:"price",title:"价格",sortable:true}
                ]]
            });
        });
    </script>

</head>
<body>
    <div id="toolbar">
        <button class="btn btn-success">新增</button>
        <button class="btn btn-primary">修改</button>
        <button class="btn btn-danger">删除</button>
    </div>
    <table id="tbItemTable">
    </table>
</body>
</html>